<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>专属客服</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,
        body {background: #fff;}
        header {padding: 0 15px;height: 44px;line-height: 44px;text-align: center;
            background-color: #ffffff;font-size: 16px;position: fixed;top: 0;
            right: 0;left: 0;display: flex;justify-content: center;align-items: center;}
        header img {position: absolute;left: 15px;width: 22px;  height: 22px;}
        .content {
            box-sizing: border-box;
            padding: 20px 15px;
            width: 100%;
        }
        .content>img {
            width: 100%;
            margin-bottom: 15px;
        }
        .content p{color: #57b16a;font-size: 14px;width: 86%;margin:0 auto;}

        .wx {
            width: 100%;
            box-sizing: border-box;
            padding: 0.4rem;
            border-radius: 15px;
            background: url("../../image/service_img2.png") no-repeat center;
            background-size: 100%;
            color: #391602;
            display: flex;
            align-items: center;
        }

        .wx img {
            font-size: 0;
            height: 1.1rem;
            width: 1.1rem;
            border-radius: 50%;
            margin-right: 10px;
        }

        .wx .wx_left {
            flex: none;
            height: 100%;
        }

        .wx .wx_left div {
            width: 4.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .wx .wx_left div:first-child {
            font-size: 18px;
            line-height: 20px;
        }

        .wx .wx_left div:last-child {
            font-size: 14px;
            line-height: 16px;
        }
        .nameText{color: #26aae1}

        .botton {
            border-radius: 50px;
            text-align: center;
            color: #ffffff;
            width: 86%;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            background: #57b16a;
            margin: 0 auto;
        }

        li .title .tm {
            color: #ffffff;
            line-height: 13px;
            background: #ff0c3f;
            border-radius: 2px;
            padding: 1px 2px;
            margin-right: 3px;
        }

        li .title .tb {
            color: #ffffff;
            line-height: 13px;
            background-image: linear-gradient(45deg,#ff7060 0%,#ff6d5d 100%);
            border-radius: 2px;
            padding: 1px 2px;
            margin-right: 3px;
        }
    </style>
</head>

<body>
    <header class="header">
        <img src="../../image/icon_return.png" alt="" onclick="back()">专属客服
    </header>
    <div class="content">
        <img class="kefuIMg" src="" alt="">
        <!-- <div class="wx">
        </div> -->
        <!-- <div class="botton" onclick="save()">
            保存二维码
        </div> -->
        <div class="botton" onclick="copy()">
            复制去微信添加
        </div>
        <p style="padding:10px 0;">截屏二维码，微信扫一扫选择相册或点击复制(<span class="nameText"></span>)微信添加好友</p>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript">
    let member_info
    apiready = function () {
        //解析元素 tapmode 属性，优化点击事件处理 - 第四步
        api.parseTapmode();
        resume("exclusive");
        $api.dom('.content').style.marginTop = $api.fixStatusBar($api.dom('header')) + 'px';
        member_info = api.getGlobalData({
            key: 'member_info'
        })
        document.querySelector(".kefuIMg").src = $api.baseUrl + member_info.service_info.avatar
        document.querySelector(".nameText").innerText = member_info.service_info.wx_id
        $api.html($api.dom(".wx"), `<img src="` + $api.baseUrl + member_info.service_info.avatar + `" alt="">
            <div class="wx_left">
                <div>` + member_info.service_info.name + `</div>
                <div>`+ member_info.service_info.wx_id + `</div>
            </div>`);
    }
    // 保存二维码图片
function save(){
    api.download({
        url: $api.baseUrl + member_info.service_info.avatar,
        savePath: 'fs://kefu.jpg',
        report: true,
        cache: true,
        allowResume: true
    },function(ret, err){
        if(ret.state == 1){
           api.saveMediaToAlbum({
               path: 'fs://kefu.jpg'
           }, function(ret, err){
               if(ret && ret.status){
                 api.toast({
                     msg: "保存成功",
                     duration: 2000,
                     location: 'middle'
                 });
               }else{
                   api.toast({
                       msg: "",
                       duration: 2000,
                       location: 'middle'
                   });
               }
          });
        }else{
            console.log( 'err2' + JSON.stringify( err ) );
        }
  });
}
function copy() {
    let clipBoard = api.require("clipBoard");
    clipBoard.set({
        value: member_info.service_info.wx_id
    }, function (ret, err) {
        if (ret) {
            api.toast({
                msg: "复制成功",
                duration: 2000,
                location: 'middle'
            });
        } else {
            // alert(JSON.stringify(err));;
        }
    });
}
function back() {
    api.closeWin({});
}
</script>

</html>
